<template>
    <div class="setting-account-safety">
        <h2>安全设置</h2>
        <div class="ivu-mt ivu-pl ivu-pr">
            <Row type="flex" justify="center" align="middle">
                <Col span="22">
                    <h4>账户密码</h4>
                    <p>当前密码强度 : {{pwStrong}}</p>
                </Col>
                <Col span="2" class="ivu-text-right">
                    <a href="#" @click="changePw(1)">修改</a>
                </Col>
            </Row>
            <Divider />
            <Row type="flex" justify="center" align="middle">
                <Col span="22">
                    <h4>绑定手机</h4>
                    <p>已绑定手机号：{{info.phone}}</p>
                </Col>
                <Col span="2" class="ivu-text-right">
                  <a href="#" @click="changePw(2)">修改</a>
                </Col>
            </Row>
        </div>
      <Drawer
          class="content"
          :width="360"
          title="修改密码"
          placement="right"
          :closable="false"
          v-model="drawerVisible"
          @close="onClose"
      >
        <setPassword v-if="type==1" @success="success"></setPassword>
        <setPhone :info="info" v-else @success="success"></setPhone>
      </Drawer>
    </div>
</template>
<script>
    import setPassword from "./setPassword";
    import setPhone from "./setPhone";
    export default {
      components:{setPassword,setPhone},
      props:{
        info:{
          type:Object,
          default:()=>{
            return {}
          }
        }
      },
        data () {
            return {
              drawerVisible:false,
              pwStrong:'弱',
              type:1,
              accountInfo:{}
            }
        },
      mounted() {
        this.init();
      },
      methods: {
        success(){
          this.onClose();
        },
        onClose(){
          this.drawerVisible=false;
        },
        changePw(type){
          this.type=type;
          this.drawerVisible=true;
        },
        init() {
          this.pwStrong=this.getpwStrong();
        },
        getpwStrong(){
          if(_.get(this.info,'pwdScore')>3){
            return '强'
          }else if(_.get(this.info,'pwdScore')>2){
            return '中等'
          }else{
            return '弱'
          }
        }
      }

    }
</script>
<style lang="less">
    .setting-account-safety{
        .ivu-col{
            p{
                margin-top: 8px;
                color: #808695;
            }
        }
    }
</style>
